/* 示例 CSS 样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
}

.container {
    width: 80%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    /* text-align: center; */
}

h1 {
    text-align: center;
    color: #333;
}

#fileDropZone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    cursor: pointer;
}

.output-box {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
    overflow: auto; /* 确保内容不会被截断 */
    position: relative; /* 确保进度条在内部居中 */
}


.result-box {
    display: flex;
    flex-direction: column; /* 确保图像垂直排列 */
    align-items: center; /* 确保图像居中 */
    width: 100%;
    text-align: center; /* 确保图像居中 */
}

.result-box img {
    max-width: 100%; /* 确保图像不会超出容器宽度 */
    height: auto; /* 保持图像比例 */
    margin: 10px 0; /* 确保图像之间有间距 */
}


/* 新增的样式 */
.final-OutputBox {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
    overflow: auto; /* 确保内容不会被截断 */
    position: relative; /* 确保进度条在内部居中 */
    text-align: left; /* 确保文本靠左显示 */
}


.final-ResultBox {
    white-space: pre-wrap; /* 确保文本在需要时换行 */
    word-wrap: break-word; /* 确保长单词在需要时换行 */
    margin-bottom: 20px;
    font-family: monospace; /* 使用等宽字体显示矩阵 */
    text-align: left; /* 确保文本靠左显示 */
}


/* 按钮容器样式 */
.button-container {
    display: flex;
    flex-direction: row; /* 确保按钮在同一行排列 */
    /*justify-content: center; /* 确保按钮容器居中 */
    gap: 10px; /* 设置按钮之间的间隔 */
}

/* 提交数据按钮样式 */
button#submitButton {
    width: 150px;
    height: 50px;
    background: none;
    border: 2px solid #9d9d9d;
    cursor: pointer;
    font-family: 'Oswald';
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 500ms;
    position: relative; /* 确保子元素绝对定位 */
}

button#submitButton:before {
    content: '';
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: calc(2px / -1);
    left: calc(2px / -1);
    background: -webkit-gradient(linear, left top, right top, from(rgb(0, 210, 0)), to(rgb(0, 210, 0))), 
                -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(0, 210, 0)), color-stop(50%, transparent)), 
                -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(0, 210, 0)), color-stop(50%, transparent)), 
                -webkit-gradient(linear, left top, right top, from(rgb(0, 210, 0)), to(rgb(0, 210, 0))), 
                -webkit-gradient(linear, right top, left top, from(rgb(0, 210, 0)), to(rgb(0, 210, 0)));
    background: linear-gradient(to right, rgb(0, 210, 0) 0%, rgb(0, 210, 0) 100%), 
                linear-gradient(to top, rgb(0, 210, 0) 50%, transparent 50%), 
                linear-gradient(to top, rgb(0, 210, 0) 50%, transparent 50%), 
                linear-gradient(to right, rgb(0, 210, 0) 0%, rgb(0, 210, 0) 100%), 
                linear-gradient(to left, rgb(0, 210, 0) 0%, rgb(0, 210, 0) 100%);
    background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    -webkit-transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: scaleX(0) rotate(0deg);
    transform: scaleX(0) rotate(0deg);
    -webkit-transition-delay: 0.6s, 0.3s, 0s;
    transition-delay: 0.6s, 0.3s, 0s;
}

button#submitButton.animate-before:hover:before {
    background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    -webkit-transition-delay: 0s, 0.3s, 0.6s;
    transition-delay: 0s, 0.3s, 0.6s;
}

button#submitButton span,
button#submitButton svg {
    position: absolute;
    color: #89db84;
    fill: transparent;
}

button#submitButton:hover {
    font-size: 14px;
}

button#submitButton:focus {
    outline: none;
    border: 2px solid transparent;
    width: 50px;
    height: 50px; /* 确保按钮是一个正方形 */
    border-radius: 50%; /* 将按钮的边框改成圆形 */
    border-left: 2px solid #89db84;
    border-bottom: 2px solid #89db84;
    animation: spin 2s 500ms forwards;
}

button#submitButton:focus span {
    color: transparent;
}

button#submitButton:focus svg {
    animation: check 500ms 2300ms forwards;
}

@keyframes spin {
    80% {
        border: 2px solid transparent;
        border-left: 2px solid #89db84;
    }
    100% {
        transform: rotate(1080deg);
        border: 2px solid #89db84;
        border-radius: 50%; /* 确保动画结束时边框仍然是圆形 */
    }
}

@keyframes check {
    to {
        fill: #89db84;
    }
}

/* 取消按钮样式 */
button#cancelButton {
    text-decoration: none;
    color: #ff0000;
    padding: 20px;
    background: none;
    position: relative;
    cursor: pointer;
    font-family: 'Oswald';
    border: 2px solid #9d9d9d;
    width: 150px; /* 设置按钮宽度 */
    height: 50px; /* 设置按钮高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition: background-color 0.3s, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, transform 0.3s ease-in-out; */
}

button#cancelButton:before {
    content: '';
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: calc(2px / -1);
    left: calc(2px / -1);
    background: -webkit-gradient(linear, left top, right top, from(red), to(red)), 
                -webkit-gradient(linear, left bottom, left top, color-stop(50%, red), color-stop(50%, transparent)), 
                -webkit-gradient(linear, left bottom, left top, color-stop(50%, red), color-stop(50%, transparent)), 
                -webkit-gradient(linear, left top, right top, from(red), to(red)), 
                -webkit-gradient(linear, right top, left top, from(red), to(red));
    background: linear-gradient(to right, red 0%, red 100%), 
                linear-gradient(to top, red 50%, transparent 50%), 
                linear-gradient(to top, red 50%, transparent 50%), 
                linear-gradient(to right, red 0%, red 100%), 
                linear-gradient(to left, red 0%, red 100%);
    background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    -webkit-transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: scaleX(0) rotate(0deg);
    transform: scaleX(0) rotate(0deg);
    -webkit-transition-delay: 0.6s, 0.3s, 0s;
    transition-delay: 0.6s, 0.3s, 0s;
}

button#cancelButton:hover {
    font-size: 14px;
}

button#cancelButton:hover:before {
    background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    -webkit-transition-delay: 0s, 0.3s, 0.6s;
    transition-delay: 0s, 0.3s, 0.6s;
}

